<template>
  <div class="session-wrap">
    <el-form inline size="medium" v-if="datas">
      <el-form-item label="大标题：">
        <el-input v-model="form.title" placeholder="大标题"></el-input>
      </el-form-item>
      <el-form-item label="描述：">
        <el-input v-model="form.desc" placeholder="描述"></el-input>
      </el-form-item>
    </el-form>
    <div class="t_l mt20">
      <el-upload
        :action="imgUpload"
        :file-list="iconList"
        list-type="picture"
        :limit="3"
        :on-preview="handlePictureCardPreview"
        :on-success="uploadIconSuccess"
        :on-remove="handleRemove"
      >
        <el-button type="success">上传icon图片</el-button>
      </el-upload>
    </div>

    <div class="t_l mt20">
      <el-upload
        :action="imgUpload"
        :file-list="fileList"
        list-type="picture"
        :on-preview="handlePictureCardPreview"
        :on-success="uploadSuccess"
        :on-remove="handleRemove"
      >
        <!-- <i class="el-icon-plus"></i> -->
        <el-button type="success">点击上传</el-button>
        <!-- <el-input  size="mini" style="width:600px;"> -->
      </el-upload>
      <el-form>
        <el-form-item
          :label="'第'+ (Number(index)+1) +'个图片的链接：'"
          v-for="(item,index) in fileList"
          :key="index"
          class="mt20"
        >
          <el-input v-model="item.backUrl" placeholder="请输入链接地址" width="70%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()" size="mini">取消</el-button>
        <el-button type="primary" @click="saveSinglEMapConf" size="mini">确定</el-button>
      </div>
    </div>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
// 引入资源
export default {
  name: "session",
  props: {
    iconList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    moduleId: {
      type: String
    },
    fileList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    MoreMapDialogVisible: {
      type: Boolean
    },
    datas: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      form:{
        title: "",
        desc: "",
      },
      title: "",
      subTitle: "",
      desc: "", // 是否显示单图上传
      imgUpload: this.utils.imgUploadUrl, // 上传图片地址
      dialogVisible: false // 是否显示查看图片
    };
  },

  methods: {
    uploadIconSuccess(file) {
      this.iconList.push({ url: file.data.imgUrl, backUrl: "" });
    },
    // 上传图片保存信息
    saveSinglEMapConf() {
      let imgUlrList = this.fileList;
      imgUlrList.forEach(item => {
        item.imgUrl = item.url;
      });
      let params = {};
      params.templateDataType = 0;
      params.moduleId = this.moduleId;
      params.variablesObject = {
        imgUlrList: imgUlrList,
        title: this.form.title,
        desc: this.form.desc,
        icon: this.iconList
      };
      params.platform = 1;
      console.log(params);
      this.utils.request.cmsPageModuleAddModuleData(params, res => {
        if (res.code === "0000") {
          // this.MoreMapDialogVisible=false
          this.$emit("MoreMapDialogVisibleFun");
          this.$emit("getIndex");
          this.$message({ message: "保存成功", type: "success" });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },

    // 图片回显  handlePictureCardPreview
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.imageUrl;
      this.dialogVisible = true;
    },

    // 删除已上传的图片  handleRemove
    handleRemove(file, fileList) {
      if (fileList && fileList.length > 0) {
        this.fileList = fileList;
      }
    },

    // 上传成功后回调
    uploadSuccess(file) {
      this.fileList.push({ url: file.data.imgUrl, backUrl: "" });
    },

    close() {
      // this.MoreMapDialogVisible=false
      this.$router.push("/Pages/Configuration/Cms/CmsPages");
    }
  },

  mounted() {
    // 格式化list格式
    this.form = this.datas;
    if (this.fileList && this.fileList.length > 0) {
      this.fileList.forEach(item => {
        // imgUrlList.push({url:item.imgUrl})
        item.url = item.imgUrl;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-button {
  margin-bottom: 5px;
}
.session-wrap {
    padding-top: 20px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  background-color: #fff;
  margin-bottom: 10px;
  .session-image-wrap {
    width: 100%;
    height: 125px;
    margin-bottom: 10px;
    .session-image {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
.form {
  /deep/ .el-form-item,
  /deep/ .el-form-item__content,
  /deep/ .el-input__inner {
    width: 100%;
  }
}
.mt20 {
  margin: 20px 0;
}

.dialog-footer {
  margin-top: 20px;
}
.t_l {
  text-align: left;
}
</style>
